import React, { useState, useEffect } from "react";
import Axios from "axios";
import "./app.scss";
const App = () => {
  const [time, setTime] = useState(0);
  const [value, setValue] = useState([]);
  useEffect(() => {
    return Axios.get("/api", {
      params: {
        tn: "indexload",
        page: 0,
        h: 10086,
      },
    }).then((result) => {
      setValue(result.data);
      console.log(value);
    });
  }, []);

  const ul_list = [
    { n1: "美国科幻电影《哥斯拉大战金刚》桌面壁纸", n2: "玉蛮蛮 4月5日" },
    { n1: "激烈的橄榄球比赛图片", n2: "鱼七忆 3月6日" },
    { n1: "希腊扎金索斯自然风景图片", n2: "玉蛮蛮 4月5日" },
    { n1: "摩丝摩丝恭贺新禧卡通桌面壁纸", n2: "玉蛮蛮 4月5日" },
    { n1: "2021新年贺卡海报封面素材图片", n2: "流星 2月6日" },
    { n1: "折耳猫图片", n2: "viline 2月4日" },
  ];
  const main_main = [
    "图片大全",
    "图片大全",
    "图片大全",
    "图片大全",
    "图片大全",
    "图片大全",
    "图片大全",
    "图片大全",
    "图片大全",
    "图片大全",
    "图片大全",
    "图片大全",
    "图片大全",
    "图片大全",
    "图片大全",
    "图片大全",
    "图片大全",
  ];
  return (
    <div className="box">
      <header>
        <div className="header">
          <div className="left">
            <div>
              <img src="https://img.ivsky.com/img/images/headlogo.gif" alt="" />
            </div>
            <ul>
              <li>首页</li>
              <li>图片大全</li>
              <li>桌面壁纸</li>
              <li>旧版</li>
            </ul>
          </div>
          <div className="right">
            <label>
              <input type="text" placeholder="查找 图片" />
              <span>搜索</span>
            </label>
            <div className="header-time">
              <p>2021/4/21</p>
              <p>周三 14:02:23</p>
            </div>
          </div>
          <div className="clear"></div>
        </div>
      </header>
      <main>
        <div className="main-top">
          <div className="top">
            <div className="img">
              <img
                src="https://img.ivsky.com/img/tupian/slides/202007/19/zakinthos-020.jpg"
                alt=""
              />
            </div>
            <div className="ul">
              <ul>
                {ul_list.map((item, index) => {
                  return (
                    <li key={index}>
                      <div>
                        <span> {item.n1} </span>
                        <br />
                        <span> {item.n2} </span>
                      </div>
                    </li>
                  );
                })}
              </ul>
            </div>
          </div>
          <div className="main-main">
            <div className="span">
              <span>图片大全</span>
              <span>桌面壁纸</span>
            </div>
            <div>
              <ul>
                {main_main.map((item, index) => {
                  return <li key={index}>{item}</li>;
                })}
              </ul>
            </div>
          </div>
        </div>
        <div className="main-zhenmain">
          <div className="lh">
            <div className="lh-top">
              04月
              <h1>18</h1>
            </div>
            <ul>
              {value.map((item, index) => {
                return (
                  <li key={index}>
                    <img src={item.litpic} alt="" />
                    <p>{item.title}</p>
                  </li>
                );
              })}
            </ul>
          </div>
        </div>
      </main>
    </div>
  );
};
export default App;
